<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>{% block title %}{% endblock %}</title>
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<!-- CSS -->
	<link rel="stylesheet" href="{{ STATIC_URL }}style.css" type="text/css" />
	<link rel="stylesheet" href="{{ STATIC_URL }}jquery.rating.css" type="text/css" />
	
	<script type="text/javascript" src="{{ STATIC_URL }}jquery.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}jquery.validate.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}jquery.form.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}jquery.rating.js"></script>
	
	
	<script type="text/javascript">
		
	$(document).ready(function(){
		//search
	    $("input").focus(function(){
		  $(this).css({"background-color":"#FFFFE0",
			  "border":"1px solid #78bee2"
		  });
	  });
	  
	    $("input").blur(function(){
	    $(this).css({"background-color":"#FFFFFF",
		  });   
	    });
	            
			// highlight 
			var elements = $("input[type!='submit'], textarea, select");
			elements.focus(function(){
				$(this).parents('li').addClass('highlight');
			});
			elements.blur(function(){
				$(this).parents('li').removeClass('highlight');
			});
	 
	   
	});
	</script>
</head>

<body>
	<p><a name="top"></a></p>
		<div id="wrapper">
			<!-- Header -->
			<div id="header">
			   <div id="headerbox">
	            
				<!-- website name  -->
				<h1><a href="#">CourseHub</a></h1>
				<!-- website name end -->
					
	        <!-- Login/Register -->
				<span id = "login">
				{% block account %}{% endblock %}
				</span>
	            <!-- Login/Register -->
	
					<!-- Menu -->
				
				{% block menu %}
				<span class = "menu">
				<ul >
					<li class="active"><a href="/course/">Home</a></li>
					<li><a href="/create/">Create Course</a></li>
					<li><a href="/search/">Search Course</a></li>
				</ul>
		    	</span>
				{% endblock %}
				<!-- Menu end -->
	
				<!-- Search form <div id="picture-input">-->	
			
					<form  id="searching" action="/search/" method="post">{% csrf_token %}
                    <div id="picture-input">
						<input  type="text" name="course_title" maxlength="50" />
                    </div>						
						<input id = "smallsearch" type="submit" value="Search" />							
					</form>
			
				<!-- Search form end </div>-->
				</div>	
			</div>
			<!-- Header end -->
	
	<hr class="noscreen" />
		<!-- Content  -->
		<div id="content">
			<!-- Content box -->
			<div id="content-box">
			
				<!-- Content box inside -->
				<div id="content-box-inside">
				<div id="navigation">
						<p><a href="/course/">Home</a>{% block navigation %}{% endblock %}</p>
				</div>
				{% block content %}
				{% endblock %}						
				</div>
				<!-- Content box inside -->
				<div class="cleaner">&nbsp;</div>
			</div>
			<!-- Content box end -->
		</div>
		<!-- Content end -->
	
	<hr class="noscreen" />
		
		<!-- Footer -->
		<div id="footer">
			<div id="footer-in">
				<p>Powered by CyberRabbit  | <span>&uarr;</span> <a href="#top"><span>Top</span></a></p>
			</div>
		</div>
		<!-- Footer end -->
	
	</div>
</body>
</html>